<template>
  <div class="contents">
    <div class="TitleBar">
        <TitleBar :imgUrl="url" :Title="'我的收藏'"></TitleBar>
    </div>
    <div class="main-box">
        <div class="goodsItem">
            <GoodsItem :datalist="collectData"></GoodsItem>
        </div>
    </div>
    <!-- <template v-if="collectData.length>=1">
        <div class="box">
            <div class="goodsItem">
                <GoodsItem :datalist="collectData"></GoodsItem>
            </div>
        </div>
    </template>
    <template v-else>
        <el-empty :style="{height:screnHeight-206+'px'}" description="您还没有收藏的商品哦！"></el-empty>
    </template> -->
  </div>
</template>

<script>
import TitleBar from '../components/TitleBar.vue'
import GoodsItem from '../components/goods/goodsItem.vue'
export default {
    data(){
        return{
            url:require('../static/imgs/收藏.png'),
            collectData:[],
            screnHeight:document.body.clientHeight
        }
    },
    components:{
        TitleBar,
        GoodsItem
    },
    created(){
        this.getCollectData()
    },
    methods:{
        async getCollectData(pageNumber,pageSize){
            const res = await this.$http.post('/goods/getCollect',{pageNumber,pageSize})
            if(res.status == 200){
                res.data.result.list.forEach((item,index)=>{
                    this.collectData.push(item.goods_info)
                })
            }
        }
    }
}
</script>

<style scoped>
.contents{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main-box {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 548px;
}
.goodsItem{
    width: 80%;
    margin-bottom: 20px;
}
</style>